.flow-main-main {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
}

.flow-main {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  padding-top: 10px;
  padding-bottom: 10px;

  .flow-row {
    display: flex;

    .flow-node {
      border: 1px solid #DCDFE6;
      padding: 6px;
      margin: 6px 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 180px;
      /*min-width: 200px;*/

      .flow-item {
        margin: 6px;
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        padding: 0 6px;

        .el-input__inner {
          text-align: center;
          border: none;
          background-color: #FFFFFF;
          color: #606266;
          cursor: auto;
        }

        .el-input--suffix  {
          .el-input__suffix {
            top: 2px;
          }

          .el-input__inner {
            padding-left: 30px;
          }
        }

        .el-divider--horizontal {
          margin: 0;
        }

        .el-icon-search {
          font-size: 20px;
          color: #409EFF;
          cursor: pointer;
        }

        .flow-tool {
          padding-top: 2px;
          height: 34px;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          width: 100%;
        }

        .flow-user {
          padding-top: 8px;
          padding-bottom: 8px;
        }

        .flow-btn {
          .el-link {
            margin-left: 4px;
            margin-right: 4px;
            font-size: 18px;
          }

          .el-checkbox {
            margin-left: 4px;
            margin-right: 4px;

            .el-checkbox__label {
              padding-left: 4px;
            }
          }
        }
      }
    }

    .flow-node-arrows {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;

      &:before {
        content: '';
        transform: rotate(-90deg);
        border-style: solid;
        border-width: 10px 8px 6px;
        border-color: #CACACA transparent transparent;
        margin-right: -6px;
      }
    }

    .flow-arrows {
      border: none;
      margin-right: 0;
      margin-left: 0;
      font-size: 30px;
      width: auto;
      /*min-width: auto;*/

      .el-link {
        font-size: 22px;
      }

      .el-dropdown {
        font-size: 22px;
        color: #1890ff;
      }
    }

    .flow-arrows-2 {
      border: none;
      margin-right: 0;
      margin-left: 0;
      width: 60px;
      /*min-width: 60px;*/
      padding: 0;

      &.margin-top {
        &:before {
          margin-top: 26px;
        }
      }

      &:before {
        content: "";
        width: 100%;
        height: 2px;
        background-color: #CACACA;
      }

      .flow-add-btn {
        font-size: 26px;
        color: #1890ff;
        background-color: #ffffff;
        width: 26px;
        height: 26px;
        top: -21px;
      }

      .el-link {
        font-size: 26px;
        background-color: #ffffff;
        position: absolute;
      }
    }
  }

  .flow-condition-btn {
    display: flex;
    align-items: center;

    .el-button {
      position: absolute;
      margin-left: -40px;
    }
  }

  .flow-content-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    .flow-content {
      display: flex;
      flex-direction: row;
      align-items: center;

      .flow-condition {
        width: 180px;

        .el-card__header {
          padding: 6px;
          min-height: 20px;

          .flow-condition-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            line-height: 20px;

            .el-link {
              font-size: 16px;
              margin: 0 2px;
            }
          }
        }

        .el-card__body {
          padding: 6px;
        }
      }
    }
  }

  .flow-content-border {
    width: 2px;
    height: 50%;
    background-color: #CACACA
  }

  .btn-large {
    width: 120px !important;

    .flow-add-btn {
      left: -20px;
    }
  }

  .flow-node-main {
    display: flex;
    align-items: center;
  }
}

.flow-form-item {
  margin-bottom: 28px;

  .el-form-item__content {
    margin-left: 0 !important;
    line-height: 32px;
  }
}

.idea-form-item {
  .el-form-item__content {
    margin-left: 70px !important;
    line-height: 32px;
  }
}

@media only screen and (max-width: 767px) {
  .idea-form-item {
    .el-form-item__content {
      margin-left: 40px !important;
    }
  }

  .flow-detail {
    justify-content: flex-start !important;
  }
}

@media only screen and (max-width: 500px) {
  .idea-form-item {
    .el-form-item__content {
      margin-left: 0 !important;
    }
  }
}

.start-end {
  width: 85px !important;
  height: 85px !important;
  color: #606266;
  border: 2px solid #DCDFE6 !important;

  .el-input__inner {
    color: #409EFF !important;
  }
}

.flow-title {
  font-size: 15px;
  font-weight: 700;
  color: #303133
}

.flow-detail {
  justify-content: center;

  .flow-row {
    .flow-node {
      width: 130px;
      /*min-width: 120px;*/
      margin: 0;
      border: none;
      padding: 0;

      &.start-end {
        width: 80px !important;
        height: 80px !important;
      }

      .flow-item {
        width: 130px;
        padding: 0;
        margin: 0;
        border-radius: 0;

        .flow-tool {
          height: 35px;

          .flow-tool-label {
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            width: 112px;
            text-align: center
          }
        }

        .flow-user {
          height: 48px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .end {
        height: 83px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .flow-arrows {
      font-size: 24px;
      width: auto;
      /*min-width: auto;*/
    }

    .flow-arrows-2 {
      width: 28px;
    }
  }

  .agree {
    color: #ffffff;
    background-color: #67C23A;
  }

  .disagree {
    color: #ffffff;
    background-color: #F56C6C;
  }

  .no-approval {
    color: #ffffff;
    background-color: #909399;
  }

  .other {
    color: #ffffff;
    background-color: #C0C4CC;
  }
}

.condition-card {
  .el-card__header {
    padding: 8px;
    background-color: #EEEEEE;

    .condition-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 22px;
    }
  }

  .el-card__body {
    padding: 8px;

    .condition-content {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;

      .condition-content-item {
        width: 25%;

        &.end {
          width: 42%;
        }

        .el-tag {
          margin-right: 6px;
        }
      }

      .el-link {
        font-size: 18px;
      }
    }
  }
}

.condition-footer {
  padding: 0 8px;
  margin-top: 8px;
}

.input-new-tag {
  width: 68px;
  vertical-align: bottom;
}

.tooltip-line {
  margin: 6px 0;
}
